今天要認識的useCallback跟useMemo很像，都是為了減少資源而存在的Hook。那他們差異在哪呢?

useCallback v.s. useMemo

useCallback回傳整個function

useMemo回傳function的值

const callback = useCallback(() => {
  return a + b
}, [a, b])
<div>{callback()}</div>//jsx

const memo = useMemo(() => {
  return a + b
}, [a, b])
<div>{memo}</div>//jsx

範例

先做一個Calc子元件，getItems接收App父元件props進來的資料

function Calc({ getItems })  {
  const [items,setItems]=useState([])
  useEffect(()=>{
    setItems(getItems())
    console.log('updating')
  },[getItems])
  return items.map(item=><div key={item}>{item}</div>)
}

初始炫染畫面的時候，console會先出現一個updating，是因為原先的number從無到有，算是一種改變，所以觸發了useCallback的相依變數number，進而執行了子元件的函式。

function App() {
  const [data, setData] = React.useState('');
  const [number, setNum] = React.useState(2);
  
  const getItems =useCallback(()=>{
    return[number, number*number]
  },[number])
 
  return (
    <>
      <input type="text" value={data} onChange={(e)=>setData(e.target.value)} />
      <input type="number" value={number} onChange={(e)=>setNum(e.target.value)} />
     
       <Calc getItems={getItems}/>
    </>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

點擊number input依舊會觸發getItems，console顯示updating，但使用了useCallback後點擊text input不會再次觸發updating。

這邊有實際範例可以操作看看，有時候文字說明只是輔助，自己動手寫寫看可以幫助理解整個流程，還可以發現自己的盲點!